<html>
  <head>
    <title>Lesson04 - React第四课之组件与props</title>
  </head>
  <body>
    <div id="app"></div>
    <ul>
      <li>React中定义组件的方式有两种：使用函数的方式和使用类的方式</li>
      <li>React中组件名称必须以大写字母开头</li>
      <li>React中组件返回值只能有一个根元素</li>
    </ul>

    
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
      // 方式一： 使用函数的方式定义组件
      function Welcome(props) {
        return <h1>Hello, { props.name }</h1>
      }

      // 方式二： 使用类(ES6)的方式定义组件
      class Welcome1 extends React.Component {
        render() {
          // let props = this.props;
          // this.props = {
          //   name: '哈哈哈',
          //   age: 24
          // }
          // console.log(props);
          return <h1>Hello, { this.props.name }</h1>
        };
      }

      // 组件的复用
      function App() {
        return (
          <div>
            <Welcome name={'哈士奇'}/>
            <Welcome name={'架构师卓'}/>
            <Welcome name={'陈皮皮'}/>
          </div>
        )
      }

      // ReactDOM.render(<Welcome name={'哈士奇'}/>, document.getElementById('app'));
      // ReactDOM.render(<Welcome1 name={'哈士奇'}/>, document.getElementById('app'));
      ReactDOM.render(<App/>, document.getElementById('app'));
    </script>
  </body>
</html>